import QtQuick 2.0
import QtQuick.Layouts 1.14
import QtGraphicalEffects 1.14
import QtMultimedia 5.14
import "../component"

Item {
    id:root
    property string  pageColor : '#CECDCD'          // 页面背景颜色
    property string  recSelectColor: '#1989FA'  // A3 A4 A5 A6 被点击选择切换的颜色
    property int  selectInx : clothStyleObj.sizeStyle   // A3 A4 A5 A6 被选择的序号


    //设置音频
    MediaPlayer {
        id: playMusic
        playbackRate: 2
        source: "qrc:/music/click2.mp3"
    }

    RowLayout{
        anchors.fill: parent
        spacing: 0
        Rectangle{
           color: pageColor
           Layout.fillWidth : true
           Layout.fillHeight : true

           RowLayout{
               anchors.fill: parent
               Image {
                   id: clothImg
                   source:"qrc:/imgs/cloth.png"

                   Rectangle{
                       width: root.selectInx == 3 ? 210 : 200
                       height: root.selectInx == 3 ? 300 : 280
                       anchors.centerIn: parent

                       ExClothStyle{
                           anchors.fill: parent
                       }
                   }
               }
           }
        }

        Rectangle{
           color: pageColor
           Layout.fillWidth : true
           Layout.fillHeight : true

           ColumnLayout{
               anchors.fill:parent
               Rectangle{
                   width:350
                   height:150
                   radius: 4
                   Layout.topMargin: 32
                   Layout.bottomMargin: 15
                   Layout.alignment:Qt.AlignHCenter | Qt.AlignCenter

                   ColumnLayout{
                       anchors.bottomMargin: 5
                       anchors.fill: parent
                       Text {
                           id: sizetTitle
                           text: qsTr("Size")
                           font.pixelSize: 24
                           font.bold: true
                           Layout.alignment:  Qt.AlignCenter
                       }

                       Rectangle{
                            Layout.fillWidth : true
                            height: 1
                            color: '#C6C6C6'
                       }

                       Rectangle{
                            Layout.fillWidth : true
                            Layout.fillHeight : true
                            RowLayout{
                                anchors.fill: parent
                                spacing: 0

                                Rectangle{
                                    id:rect
                                    width: 77
                                    height: 77
                                    border.color: "#C6C6C6"
                                    border.width: 1
                                    color: selectInx === 0 ? root.recSelectColor :'transparent'
                                    Layout.alignment:Qt.AlignHCenter | Qt.AlignCenter

                                    Text {
                                        id: sizeTypeA3
                                        font.pixelSize: 24
                                        font.bold: true
                                        text: qsTr("A3")
                                        anchors.centerIn: parent
                                    }

                                    MouseArea {
                                         anchors.fill: parent
                                         onPressed: {
                                             //playMusic.play();
                                             parent.scale*=.95
                                             //被选中
                                             clothStyleObj.sizeStyle = 0;
                                             //重新绘制
                                             //rep_ClothStyle(1,1);
                                         }
                                         onReleased: {
                                             parent.scale/=.95
                                         }
                                     }
                                }

                                Rectangle{
                                    width: 77
                                    height: 77
                                    border.color: "#C6C6C6"
                                    border.width: 1
                                    color: selectInx === 1 ? root.recSelectColor :'transparent'
                                    Layout.alignment:Qt.AlignHCenter | Qt.AlignCenter

                                    Text {
                                        id: sizeTypeA4
                                        font.pixelSize: 24
                                        font.bold: true
                                        text: qsTr("A4")
                                        anchors.centerIn: parent
                                    }

                                    MouseArea {
                                         anchors.fill: parent
                                         onPressed: {
                                             //playMusic.play();
                                             parent.scale*=.95
                                             //被选中
                                             clothStyleObj.sizeStyle = 1
                                             //重新绘制
                                             //rep_ClothStyle(2,1);
                                         }
                                         onReleased: {
                                             parent.scale/=.95
                                         }
                                     }
                                }

                                Rectangle{
                                    width: 77
                                    height: 77
                                    border.color: "#C6C6C6"
                                    border.width: 1
                                    color: selectInx === 2 ? root.recSelectColor :'transparent'
                                    Layout.alignment:Qt.AlignHCenter | Qt.AlignCenter

                                    Text {
                                        id: sizeTypeA5
                                        font.pixelSize: 24
                                        font.bold: true
                                        text: qsTr("A5")
                                        anchors.centerIn: parent
                                    }

                                    MouseArea {
                                         anchors.fill: parent
                                         onPressed: {
                                             //playMusic.play();
                                             parent.scale*=.95
                                             //被选中
                                             clothStyleObj.sizeStyle = 2
                                             //重新绘制
                                             //rep_ClothStyle(2,2);
                                         }
                                         onReleased: {
                                             parent.scale/=.95
                                         }
                                     }
                                }

                                Rectangle{
                                    width: 77
                                    height: 77
                                    border.color: "#C6C6C6"
                                    border.width: 1
                                    color: selectInx === 3 ? root.recSelectColor :'transparent'
                                    Layout.alignment:Qt.AlignHCenter | Qt.AlignCenter

                                    Text {
                                        id: sizeTypeA6
                                        font.pixelSize: 24
                                        font.bold: true
                                        text: qsTr("A6")
                                        anchors.centerIn: parent
                                    }

                                    MouseArea {
                                         anchors.fill: parent
                                         onPressed: {
                                             //playMusic.play();
                                             parent.scale*=.95
                                             //被选中
                                             clothStyleObj.sizeStyle = 3
                                             //重新绘制
                                             //rep_ClothStyle(3,3);
                                         }
                                         onReleased: {
                                             parent.scale/=.95
                                         }
                                     }
                                }
                            }
                       }
                   }
               }
           }
        }
    }
}
